<template>
  <div class="detailBox">
<!--    <div v-for="v in fileUrlObjs" :key="v.title" class="fileBox">-->
<!--      <div v-if="v.value && v.value.length">-->
<!--        <p class="van-cell-p">{{v.title}}</p>-->
<!--        <div class="file-list">-->
<!--          <uploadCom :readOnly="true" :defaultFiles="v.value"></uploadCom>-->
<!--        </div>-->
<!--      </div>-->
<!--      <van-cell v-else :title="v.title" value="暂无" />-->
<!--    </div>-->
    <div class="detailCon">
      <div class="basicBox" v-show="!fullLoading">
        <div class="top">
          <div class="tit">
            <b>
              {{ dataItem.DANH }}
            </b>
          </div>
          <div class="row">{{ dataItem.empNatureLabel }}</div>
        </div>
        <div class="middle">
          <p>
            <label>申请人</label>
            <span>{{ dataItem.SQRNAME }}</span>
          </p>
          <p>
            <label>联系电话</label>
            <span>{{ $infoHiding.handlePhone(dataItem.LIANXDH) }}</span>
          </p>
          <p>
            <label>申请部门</label>
            <span>{{ dataItem.SHENQBM }}</span>
          </p>
        </div>
        <div class="bottom">
          <p>
            <label>申请时间</label>
            <span>{{ dataItem.SHENQSJ }}</span>
          </p>
        </div>
      </div>

      <div class="followerBox">
        <h5 @click="isFold3 = !isFold3">
          <b>附件</b>
          <p v-if="isFold3">展开 <van-icon name="arrow-down" /></p>
          <p v-else>折叠 <van-icon name="arrow-up" /></p>
        </h5>
        <div v-show="!isFold3" class="list">
          <div
            v-for="(val, ind) in fileUrlObjs"
            :key="ind"
            class="list-item"
          >
            <div v-for="v in fileUrlObjs" :key="v.title" class="fileBox">
              <div v-if="v.value && v.value.length">
<!--                <p class="van-cell-p">{{v.title}}</p>-->
                <div class="file-list">
                  <uploadCom :readOnly="true" :defaultFiles="v.value"></uploadCom>
                </div>
              </div>
              <van-cell v-else :title="v.title" value="暂无" />
            </div>
          </div>
        </div>
      </div>

      <div class="followerBox">
        <h5 @click="isFold = !isFold">
          <b>办公物资清单（{{ listData.length }}次）</b>
          <p v-if="isFold">展开 <van-icon name="arrow-down" /></p>
          <p v-else>折叠 <van-icon name="arrow-up" /></p>
        </h5>
        <div v-show="!isFold" class="list">
          <div v-for="(val, ind) in listData" :key="ind" class="list-item">
            <div class="right">
              <div>
                <label>物资大类：</label>
                <p>{{ val.wzdlName || "-" }}</p>
              </div>
              <div>
                <label>物资小类：</label>
                <p>{{ val.wzxlName || "-" }}</p>
              </div>
              <div>
                <label>品名：</label>
                <p>{{ val.PINM || "-" }}</p>
              </div>
              <div>
                <label>保管人：</label>
                <p>{{ val.BGRNAME || "-" }}</p>
              </div>
              <div>
                <label>故障描述：</label>
                <p>{{ val.WEIXYY || "-" }}</p>
              </div>
            </div>
          </div>
          <van-empty v-if="!listData.length" class="custom-image" :image="require('../../../../assets/images/empty.png')"
                     description="暂无办公物资信息" />
        </div>
      </div>
      <div class="followerBox">
        <h5 @click="isFold2 = !isFold2">
          <b>审核记录（{{ dataList.length }}次）</b>
          <p v-if="isFold2">展开 <van-icon name="arrow-down" /></p>
          <p v-else>折叠 <van-icon name="arrow-up" /></p>
        </h5>
        <div v-show="!isFold2" class="list">
          <div v-for="(val, ind) in dataList" :key="ind" class="list-item">
            <div class="right">
              <div>
                <label>审核状态：</label>
                <p>{{ val.ISSHTG || "-" }}</p>
              </div>
              <div>
                <label>审核人：</label>
                <p>{{ val.SHRNAME || "-" }}</p>
              </div>
              <div>
                <label>审核时间：</label>
                <p>{{ val.SHENHSJ || "-" }}</p>
              </div>
              <div>
                <label>审核意见：</label>
                <p>{{ val.SHENHYJ || "-" }}</p>
              </div>
            </div>
          </div>
          <van-empty v-if="!dataList.length" class="custom-image" :image="require('../../../../assets/images/empty.png')"
                     description="暂无审核记录信息" />
        </div>
      </div>
    </div>
    <full-loading v-if="fullLoading"></full-loading>
  </div>
</template>

<script>
import {
  detail,
  detailBgwzwxsq, queryBgwzwxsqShjl,
  queryLyqd,
  queryLyqdBgwzwxsq,
  queryShjl,
  submitRecive
} from "@/api/srvAssurance/assetLabel/assetLabel";
import {queryDic, queryFileList} from '@/api/common';
export default {
  data() {
    return {
      fullLoading: false,
      isFold: true,
      isFold2: true,
      isFold3: true,
      dataItem: {},
      listData: [],
      dataList: [],
      fileUrlObjs: [],
    };
  },
  mounted() {
    this.iniSelect()
  },
  methods: {
    // 获取详情数据
    getSearch(params) {
      detailBgwzwxsq({ id: params.ID }).then(res => {
        if (res.length > 0) {
          this.dataItem = {...res[0]};
          if (res[0].FILE.length) {
            let filecodeArr = [];
            filecodeArr.push(res[0].FILE);
            this.queryFileInfoData(filecodeArr);
          }
        }
      })
      this.getQueryLyqd(params);
      this.getQueryShjl(params);
    },



    // 获取图片信息
    queryFileInfoData(filecodeArr) {
      this.loading = true;
      queryFileList(filecodeArr).then(res => {
        if (res.code === 1000 && res.data) {
          this.fileUrlObjs.push({
            title: "附件",
            value: [...res.data],
          });
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false;
      })
    },

    // 重置表单
    resetForm(item) {
      this.dataItem = {};
      this.fileUrlObjs = [];
      this.isFold = true;
      this.isFold2 = true;
      this.isFold3 = true;
      this.listData = [];
      this.dataList = [];
      this.getSearch(item);
    },

    //获取办公物资列表清单
    getQueryLyqd(params) {
      this.listData=[]
      let formData = {
        id: params.ID,
        rows: '20',
        page: '1',
      }
      queryLyqdBgwzwxsq(formData).then(res => {
        if (res.data.length > 0) {
          this.translate(res.data);
          this.listData = [...this.listData, ...res.data];
        }
      })
    },
    //获取审核记录
    getQueryShjl(params) {
      this.dataList=[]
      let formData = {
        id: params.ID,
        rows: '20',
        page: '1',
      }
      queryBgwzwxsqShjl(formData).then(res => {
        if (res.data.length > 0) {
          this.dataList = [...res.data];
        }
      })
    },
    //字典翻译
    translate(data) {
      data.forEach(item => {
        this.dlList.some(val => {
          if (val.codeValue === item.WZDL) {
            this.$set(item, 'wzdlName', val.valueAlias);
            return true
          }
        })
        this.wzxlList.some(val => {
          if (val.codeValue === item.WZXL) {
            this.$set(item, 'wzxlName', val.valueAlias);
            return true
          }
        })
      });
    },
    iniSelect() {
      //大类
      queryDic('RA_WORK_FACILITYBIG_CODE').then(res => {
        if (res.code == 1000) {
          this.dlList = res.data
        }
      })
      //小类
      queryDic('RA_WORK_FACILITYSMALL_CODE').then(res => {
        if (res.code == 1000) {
          this.wzxlList = res.data
        }
      })
    },
    showHTML(text) {
      return text
        ? text.toString().replace(new RegExp("\r\n|\n", "g"), "<br />")
        : "";
    },
  },
};
</script>

<style scoped lang="less">
.detailBox {
  background: rgb(238, 238, 238);
  height: 100%;
  overflow: auto;
}

.detailCon {
  padding: 12px;
  box-sizing: border-box;
}

.basicBox {
  padding: 30px 10px 10px;
  box-sizing: border-box;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  margin: 1px 0 8px 0;
  position: relative;

  .top {
    border-bottom: 1px dashed #aaa;
    padding: 0 5px 10px;
    margin-bottom: 12px;
    position: relative;
    line-height: 22px;

    .tit {
      b {
        font-size: 16px;

        span {
          font-size: 14px;
        }
      }

      .type {
        background: #f2a84e;
        font-size: 9px;
        color: #fff;
        margin-left: 8px;
        padding: 2px 3px;
        border-radius: 3px;
      }
    }

    .row {
      color: #999;
      font-size: 13px;
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;

      span {
        color: #bbb;
        font-size: 13px;
      }

      img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }
    }
  }

  .middle {
    padding: 0 5px 10px;
    box-sizing: border-box;
    border-bottom: 1px dashed #aaa;
  }

  p {
    display: flex;
    line-height: 28px;

    label {
      width: 105px;
      color: #999;
    }

    span {
      color: #333;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .bottom {
    padding: 0 5px;
    box-sizing: border-box;
    margin-top: 10px;

    p span,
    p label {
      color: #999;
    }
  }

  .imgBox {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}

h5 {
  border-bottom: 1px solid #f1f1f2;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-weight: normal;
  position: relative;

  b {
    font-size: 14px;
  }

  p {
    font-weight: normal;
    position: absolute;
    color: #888;
    right: 15px;
  }
}

.followerBox {
  background: #fff;
  border-radius: 8px;
  margin-top: 12px;

  /deep/.van-empty {
    padding: 20px 0;

    .van-empty__image {
      width: 50px;
      height: 50px;
    }
  }

  .list-item {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;

    img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

    .right {
      flex: 1;
      overflow: hidden;
      border-bottom: 1px solid #f1f1f2;

      div {
        display: flex;
        line-height: 28px;

        label {
          width: 120px;
          color: #999;
          padding: 0px 35px 0px 5px;
        }

        p {
          color: #333;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

// .detailBox {
//   background: rgb(238, 238, 238);
//   width: 100%;
//   height: 100%;
//   .imgBox {
//     position: relative;
//     width: 100%;
//     .fContentMain {
//       position: absolute;
//       width: calc(100% - 20px);
//       padding: 0 10px 0 10px;
//       background: rgb(238, 238, 238);
//       .contentC {
//         margin: 6px 0;
//         padding: 6px 0;
//         // display: flex;
//         border-radius: 6px;

//         align-items: flex-start;
//         background: rgb(255, 255, 255);
//         color: rgb(51, 51, 51);
//         // width: 100%;

//         height: 100%;
//         flex-direction: column;
//         justify-content: space-between;

//         .title {
//           display: flex;
//           width: 100%;
//           line-height: 30px;
//           margin: 5px 10px;

//           div:first-child {
//             width: 150px;
//             color: #878888;
//           }

//           div:last-child {
//             width: calc(100% - 100px);
//             font-weight: 500;
//           }
//         }
//       }
//     }
//     .check {
//       position: fixed;
//       width: calc(100% - 20px);
//       padding: 0 10px 0 10px;
//       top: 600px;
//       background: rgb(238, 238, 238);
//       .contentC {
//         padding: 10px 10px;
//         // display: flex;
//         border-radius: 6px;

//         align-items: flex-start;
//         background: rgb(255, 255, 255);
//         color: rgb(51, 51, 51);
//         // width: 100%;

//         height: 100%;
//         flex-direction: column;
//         justify-content: space-between;

//         .title {
//           display: flex;
//           width: 100%;
//           padding: 0px 10px 0px 0px;
//           line-height: 25px;
//           margin: 5px 10px;

//           div:first-child {
//             width: 100px;
//             padding: 0px 10px;
//             color: #878888;
//           }

//           div:last-child {
//             width: calc(100% - 100px);
//             font-weight: 500;
//           }
//         }
//       }
//     }
//   }
// }

.fileBox {
  .van-cell-p {
    padding: 10px 16px;
    box-sizing: border-box;
  }
  .file-list {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
